<template>
  <el-form
    ref="elForm"
    v-bind="$attrs"
    :model="model"
    :class="['chaso-form', formClass]"
    :rules="rules"
    v-on="$listeners"
    :disabled="disabled"
  >
    <template v-for="(item, idx) in column">
      <chaso-form-item
        v-if="!item.show || item.show(model, model, -1)"
        :key="idx"
        v-bind="$attrs"
        :column="item"
        :empty-words="emptyWords"
        :form="model"
        :root-form="model"
        :label-position="labelPosition"
        :label-width="labelWidth"
        :form-rules="rules"
        :disabled="disabled"
      />
    </template>
  </el-form>
</template>

<script>
import ChasoFormItem from './FormItem';

export default {
  name: 'ChasoForm',
  components: { ChasoFormItem },
  props: {
    column: {
      type: Array,
      default: () => []
    },
    emptyText: {
      type: String,
      default: ''
    },
    model: {
      type: Object,
      default: () => ({})
    },
    labelPosition: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    emptyWords() {
      return this.emptyText || (this.$chasoForm && this.$chasoForm.emptyText) || '';
    },
    formClass() {
      return this.$chasoForm ? this.$chasoForm.formClass : '';
    }
  },
  methods: {
    validate(cb) {
      this.$refs.elForm.validate(cb);
    },
    validateField(props, cb) {
      this.$refs.elForm.validateField(props, cb);
    },
    resetFields() {
      this.$refs.elForm.resetFields();
    },
    clearValidate(props) {
      this.$refs.elForm.clearValidate(props);
    }
  }
};
</script>

<style lang="scss" scoped>
.chaso-form.el-form--inline {
  display: flex;
  ::v-deep .chaso-form-item__object {
    padding: 0;
    display: flex;
  }
}
</style>
